<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color 属性</title>
    <style>
        .box {
            /* 
            4种color颜色书写方式
            1.英文单词中的颜色，red pink blue,仅用于学习测试
            2.十六进制颜色 #ff0000 #00ff00 #0000ff,经常用到
            3.rgb表示法,rgb(255,0,0) rgb(0,255,0) rgb(0,0,255),经常用到
            4.rgba表示法,rgb(255,0,0,0.5) 透明度0-1之间,经常用到
            */

            /* color: red;  */
            /* color: #c06; */
            /* color: rgb(255,0,0); */
            color: rgb(65,105,225,0.3);


            /* #000 黑色  #fff 白色 #ccc 灰色 #333 深灰色 #f5f5f5 浅灰色 */
        }

        .box{
            width: 200px;
            height: 50px;
            border: 1px solid #000;
        }

        .bg-color1{
            background-color: rgb(65,105,225,0.7);
        }
        .bg-color2{
            margin-top: -10px;
            background-color: rgb(30,194,139,0.5);
        }
    </style>
</head>
<body>
    <div class="box">color 属性用控制文本颜色</div>
    <div class="box bg-color1"></div>
    <div class="box bg-color2"></div>
</body>
</html>